<template>
  <div class="register-view">
    <h1>川邮账号注册</h1>
    <form @submit.prevent="handleRegister">
      <div class="input-group">
        <label for="name">姓名</label>
        <input id="name" v-model="formData.name" type="text" placeholder="请输入姓名" required />
      </div>
      <div class="input-group">
        <label for="sex">性别</label>
        <select id="sex" v-model="formData.sex" required>
          <option value="">请选择性别</option>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div class="input-group">
        <label for="age">年龄</label>
        <input id="age" v-model.number="formData.age" type="number" placeholder="请输入年龄" required />
      </div>
      <div class="input-group">
        <label for="score">分数</label>
        <input id="score" v-model.number="formData.score" type="number" step="0.01" placeholder="请输入分数" required />
      </div>
      <button type="submit" class="register-button">注册</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { studentApi, type Student } from '@/services/api'

const formData = ref<Student>({
  name: '',
  sex: '',
  age: 0,
  score: 0
})

const router = useRouter()

const handleRegister = async () => {
  try {
    // 调用 API 进行注册
    await studentApi.register(formData.value)
    // 注册成功后跳转到注册成功页面
    router.push('/register-success')
  } catch (error) {
    console.error('注册失败:', error)
    alert('注册失败，请重试')
  }
}
</script>

<style scoped>
.register-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  max-width: 375px; /* iPhone 16 宽度 */
}

h1 {
  margin-bottom: 20px;
  font-size: 24px; /* 调整标题字体大小 */
}

.input-group {
  margin-bottom: 15px;
  width: 100%;
  max-width: 300px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px; /* 调整标签字体大小 */
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px; /* 调整输入框字体大小 */
}

.register-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%; /* 让按钮宽度占满容器 */
}

.register-button:hover {
  background-color: #0056b3;
}

/* 媒体查询，针对 iPhone 16 屏幕尺寸进行优化 */
@media (max-width: 390px) {
  .register-view {
    padding: 15px; /* 减少内边距 */
  }

  h1 {
    font-size: 22px; /* 再次调整标题字体大小 */
  }

  .input-group label {
    font-size: 14px; /* 再次调整标签字体大小 */
  }

  .input-group input,
  .input-group select {
    font-size: 14px; /* 调整输入框字体大小 */
  }
}
</style>